<template>
	<view class="page_box">
		<cu-custom :isBack="true" bgColor="bg-white">
			<block slot="content">
				<text class="text-bold">科目三{{type==1?'适应':'加练'}}</text>
			</block>
			<block slot="right">
				<text v-if="!showSearchBox" class="lg cuIcon-unfold margin-left-xs btn-show" @click="openSearchBox()"></text>
				<text v-if="showSearchBox" class="lg cuIcon-fold margin-left-xs btn-show" @click="closeSearchBox()"></text>
			</block>			
			<block slot="right">
				<view class="action">
					<image src="../../../static/img/line-exchange.png" class="top_right_ico" @tap="turnR()"></image>
				</view>
			</block>
		</cu-custom>
		<view class="head_box">
			<scroll-view scroll-x class="bg-white nav solid-bottom solid-top">
				<view class="flex text-center">
					<view class="cu-item flex-sub text-blue cur">已入场</view>
					<view class="cu-item flex-sub" @tap="goPath('/pages/user/count/sectionIII-inpractice?type='+type)">在练车</view>
				</view>
			</scroll-view>
		</view>
		<view class="content_box">
			<scroll-view scroll-y="true" class="scroll-box">
				<view class="list" v-for="(item, index) in list" :key="index">
					<view class="order-head x-bc" style="border-bottom: none;">
						<text>{{ item.xyname }}</text>
						<text>路线：{{item.xl}}</text>
						<text>{{item.ttmc}}</text>
					</view>
					<view class="order-head x-bc">						
						<text v-if="type==1">适应：{{item.kysyqs}}圈</text>
						<text v-else>训练：{{item.syqs}}圈+{{item.sysj}}小时</text>
						<text>{{ item.leix}}</text>
					</view>
					<view class="order-bottom x-bc">
						<view class="all-msg" @click="tapSelectItem(index)">
							<view v-if="isSel">
								<ct-icon v-if="!item.checked" name="circle" color="#999999"></ct-icon>
								<ct-icon v-else name="v-circle" color="#3C78DA"></ct-icon>
							</view>
						</view>
						<view class="btn-box">
							<button @tap.stop="onCall(item)" class="cu-btn obtn1">呼叫</button>
							<button @tap.stop="onPlan(item)" class="cu-btn obtn2 bg-blue">安排练车</button>
						</view>
					</view>
				</view>
				<uni-load-more v-if="loading" status="loading"></uni-load-more>
				<uni-load-more v-if="ended&&list.length" status="noMore"></uni-load-more>
				<xw-empty :is-show="ended&&!list.length"></xw-empty>
			</scroll-view>
			
		</view>	
		<view class="cu-bar bg-white tabbar border" v-if="list.length">
			<view class="margin-left-lg" @tap="onSet" :class="isSel?'text-red':''">多选</view>
			<view class="margin-right-sm"><button @tap="onPlan()" class="cu-btn bg-orange round shadow-blur">批量安排练车</button></view>
		</view>
		<!-- 选择车辆 -->
		<view class="cu-modal" :class="modalName=='ChooseModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white padding-sm" style="padding-bottom: 0rpx; margin-bottom: 0rpx;" v-if="selName">
					<view class="text-lg">学员：{{selName}}</view>
				</view>
				<view class="cu-bar bg-white padding-sm">
					<view class="text-lg">请选择车号</view>
				</view>
				<scroll-view scroll-y="true" class="dialog-scroll-box bg-white">
					<view class="grid col-5 padding-sm">					
						<view v-for="(item,index) in checkboxCarList" class="padding-xs" :key="index">
							<button class="cu-btn block" style="padding: 0rpx 18rpx;" :class="selCarId==item.clxh?'bg-blue':'line-blue'"
								@tap="ChooseCar" :data-value="item.clxh"> {{item.cph+'号'}}
							</button>
						</view>
					</view>
				</scroll-view>
				<view class="cu-bar bg-white padding-sm">
					<view class="text-lg">请选择安全员</view>
				</view>
				<scroll-view scroll-y="true" class="dialog-scroll-box bg-white">
					<view class="grid col-5 padding-sm">					
						<view v-for="(item,index) in safetyList" class="padding-xs" :key="index">
							<button class="cu-btn block" style="padding: 0rpx 18rpx; font-size:24rpx;" :class="selSafeId==item.uuid?'bg-blue':'line-blue'"
								@tap="ChooseSafety" :data-value="item.uuid"> {{item.name}}
							</button>
						</view>
					</view>
				</scroll-view>
				
				<view class="cu-bar bg-gray padding-lr">
					<view class="cu-btn round bg-white" @tap="hideModal">取消</view>
					<view class="cu-btn round bg-blue" @tap="onPlanOk">确定安排练车</view>
				</view>
			</view>
		</view>
		<!--筛选-->
		<uni-popup ref="popup" type="top">
			<view class="search-box solid-top">
				<view class="search-box-title">学员类型</view>
				<view class="search-box-list">
					<text class="cu-btn round margin-right-sm" @tap="onTagUType(0)" :class="utype==0?'bg-blue':''">全部</text>
					<text class="cu-btn round margin-right-sm" @tap="onTagUType(1)" :class="utype==1?'bg-blue':''">团体</text>
					<text class="cu-btn round margin-right-sm" @tap="onTagUType(2)" :class="utype==2?'bg-blue':''">个人</text>
				</view>			
			</view>
			<view>
				<view class="cu-btn bg-gray lg w50" @tap="closeSearchBox()">取消</view>
				<view class="cu-btn bg-blue lg w50">确定</view>
			</view>
		</uni-popup>		
	</view>
</template>

<script>
	import nuiPopup from "@/components/uni-popup/uni-popup.vue"
	import uniloadmore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		components: {nuiPopup,uniloadmore},
		data() {
			return {
				type: 0,
				utype: 0,
				list: [],
				page: 1,
				size: 20,
				loading: false,
				ended: false,
				picker: ['个人', '团体', '全部'],
				checkboxCarList: [],
				showSearchBox:false,
				isSel: false,
				safetyList:[],
				modalName: null,
				selName:'',
				selCarId:'',
				selSafeId:'',
				planInfo:{}
			}
		},
		onLoad(option) {
			if(option.type)
			{
				this.type=option.type;
			}
			this.page = 1;
			this.ended = false;
			this.loadList();
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				this.page = 1;
				this.ended = false;
				this.loadList();
			},1000)
		},
		onReachBottom() {
			if (!this.ended) this.loadList();
		},
		methods: {
			turnR(){
				if(this.type==0)
				{
					this.type=1;
				}
				else if(this.type==1)
				{
					this.type=0;
				}
				this.page = 1;
				this.ended = false;
				this.loadList();
			},
			loadList() {
				this.tool.request('c=api_xyqd&m=queryXylcList&kmtype=3&xytyle=4&jltype='+this.type+'&pageNo='+this.page+'&pageSize='+this.size,'','post',{login:true}).then(r => {
					if (r.code == '000') {
						const list = this.page == 1 ? [] : this.list;
						list.push(...r.data);
						this.list=list;
						this.page++;
						this.ended = r.data.length < this.size;
						uni.stopPullDownRefresh();
					} else this.tool.showMsg(r.msg);
				}).catch(() => {});
			},
			loadCar() {
				this.tool.request('c=api_Aqygl&m=getClxx&pageNo=1&pageSize=50&clkm=3','','post',{login:true}).then(r => {
					if (r.code == '000') {
						this.checkboxCarList=r.data;
					} else this.tool.showMsg(r.msg);
				}).catch(() => {});
			},
			loadSafety() {
				this.tool.request('c=api_Aqygl&m=getAayXx&pageNo=1&pageSize=50','','post',{login:true}).then(r => {
					if (r.code == '000') {
						this.safetyList=r.data;
					} else this.tool.showMsg(r.msg);
				}).catch(() => {});
			},			
			onSet() {
				this.isSel = !this.isSel;
			},
			tapSelectItem(index) {
				let sum = 0;
				const list = this.list.map((_item, _index) => {					
					let checked = _item.checked;
					if (index == _index) checked = !_item.checked;
					if (checked) sum++;
					return Object.assign({}, _item, {
						checked: checked
					});
				});
				this.list = list;
			},
			openSearchBox(){
				this.showSearchBox=true;
				this.$refs.popup.open();
				console.log(this.showSearchBox);
			},
			closeSearchBox(){
				this.showSearchBox=false;
				this.$refs.popup.close();
			},
			// 安排练车
			onPlan(item){
				if(item)
				{
					this.selName=item.xyname;
					this.planInfo={
						sfzh:item.sfzh,
						uuid:item.uuid
					}
				}
				else
				{
					this.selName='';
					this.planInfo={};
				}
				this.modalName = "ChooseModal";
				this.loadCar();
				this.loadSafety();
			},
			//确认安排
			onPlanOk(){
				if (!this.selCarId) {
					this.tool.showMsg('请先选择车号！');
					return false;
				}
				if (!this.selSafeId) {
					this.tool.showMsg('请先选择安全员！');
					return false;
				}
				var pram='';
				var data='';
				//安排单人练车
				if(this.planInfo.uuid)
				{
					pram='c=api_Aqygl&m=apcl&sfzh='+this.planInfo.sfzh+'&uuid='+this.planInfo.uuid+'&clxh='+this.selCarId+'&aqyid='+this.selSafeId;					
				}
				else
				{
					const arrList = this.list.filter(item => {
						return item.checked;
					}).map(item => {
						return {
							sfzh:item.sfzh,
							uuid:item.uuid,
							clxh:this.selCarId,
							aqyid:this.selSafeId,
							oldcl:''
						};
					});	
					if (!arrList.length) {
						this.tool.showMsg('请先选择学员！');
						return false;
					}
					pram='c=api_Aqygl&m=apclPl';
					data={list:JSON.stringify(arrList)};
				}
				this.tool.request(pram,data,'post',{login:true}).then(r => {
					if (r.code == '000') {
						this.modalName = null;
						this.selCarId='';
						this.selSafeId='';
						this.page = 1;
						this.ended = false;
						this.loadList();
						this.tool.showMsg('操作成功！');						
					} else this.tool.showMsg(r.msg);
				}).catch(() => {});
			},
			hideModal(e) {
				this.modalName = null
			},
			// 呼叫
			onCall(item){
				let msg = '请'+item.xyname+'到分车台确认车号上车';
				let ttt = this.changeEnCode(msg);
				var main = plus.android.runtimeMainActivity()
				var SpeechUtility = plus.android.importClass('com.iflytek.cloud.SpeechUtility')
				SpeechUtility.createUtility(main, "appid=5f33d9fa")
				var SynthesizerPlayer = plus.android.importClass('com.iflytek.cloud.SpeechSynthesizer')
				var play = SynthesizerPlayer.createSynthesizer(main, null)				
				uni.getSystemInfo({
					success: function(res) {
						var sys=res.system;
						//if (parseInt(res.system) >= 8) { //判断安卓版本
						if ((sys.indexOf("8")!= -1)||(sys.indexOf("9")!= -1)||(sys.indexOf("10")!= -1)||(sys.indexOf("11")!= -1)) {
							play.startSpeaking(ttt, null) // 播放播报
						} else {
							play.startSpeaking(msg, null) // 播放播报
						}				
					}
				});
			},
			//网上找的
			changeEnCode(str) {
				let res = []
				for (let i = 0; i < str.length; i++) {
					// 这个不是正常的encodeUnicode 颠倒了大小端的位置  
					res[i] = ("00" + str.charCodeAt(i).toString(16)).slice(-2) + ("00" + str.charCodeAt(i).toString(16)).slice(-4, -2)
				}
				let strCode = "\\u" + res.join("\\u")
				strCode = strCode.replace(/\\/g, "%")
				return unescape(strCode)				
			},
			//选择团队
			onTagUType(n){
				this.utype=n;
			},
			ChooseCar(e)
			{
				this.selCarId=e.currentTarget.dataset.value;
			},
			ChooseSafety(e)
			{
				this.selSafeId=e.currentTarget.dataset.value;
			},
			goPath(path)
			{
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style lang="less">
	.page_box {
		position: relative;
	}
	.w50 {
		width: 50%;
	}
	
	.content_box {
		padding: 0 20rpx;
	}
	.top_right_ico{
		width: 48rpx;
		height: 48rpx;
	}
	.list {
		background: #fff;
		margin: 20rpx 0;
		border-radius: 10rpx;
		padding-top: 25rpx;
	
		.order-bottom {
			padding-top: 20rpx;
			padding-bottom: 20rpx;
	
			.btn-box {
				justify-content: flex-end;
			}
			.obtn1 {
				width: 160rpx;
				height: 60rpx;
				background: #fff;
				border-radius: 30rpx;
				border: 2rpx solid #ddd;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-right: 20rpx;
				padding: 0;
			}
	
			.obtn2 {
				width: 160rpx;
				height: 60rpx;
	
				border-radius: 30rpx;
				margin-right: 20rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #fff;
				padding: 0;
			}
		}
	
		.order-head {
			padding: 0 25rpx 25rpx;
			// height: 50rpx;
			border-bottom: 1rpx solid #dfdfdf;
		}
		.order-item{
			padding: 0 25rpx 25rpx;
			// height: 50rpx;
		}
	
		.order-content {
			padding: 20rpx 20rpx 0;
		}
	
		.list-border {
			border-bottom: 1rpx solid #dfdfdf;
		}
	
		.goods-bottom {
			background: #fff;
			padding-bottom: 30rpx;
		}
	}
	.list-info-box{
		position: relative;
	}
	.list-info-box{
		position: relative;
	}
	.box-check{
		width: 60rpx;
		height: 48rp;
		position: absolute;
		top:30rpx;
		left: 20rpx;
		margin-right: 40rpx;
	}
	.search-box {
	    margin-top: 80rpx;
	    transition: .3s;
	    z-index: 9999;
		background-color: #FFFFFF;
		padding: 30rpx 30rpx;
	}
	.search-box-title {
	    font-size: 30rpx;
		color: #666666;
		padding: 20rpx 0rpx;
	}
	.search-box-list {
		padding: 10rpx 0rpx;
	}
	.btn-show{
		margin-left: 200rpx;
		 display: inline-block;
	}
	.all-msg {
		padding-left: 24rpx;
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
	}
	.dialog-scroll-box{
		height: 14vh;
	}
</style>
